<template>
  <div class="dialog">
    <el-dialog
      v-elDragDialog
      :visible="isShow"
      :title="dialog.title || '提示'"
      :append-to-body="dialog.append || false"
      :fullscreen="dialog.fullscreen || false"
      :width="width"
      :top="top"
      :before-close="handleClose"
    >
      <slot />
      <span v-if="showFooter" slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleClose">{{ btnCancle }}</el-button>
        <el-button size="medium" type="primary" @click="handleBtnSure">{{ btnSure }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  name: 'Dialog',
  directives: { elDragDialog },
  props: {
    // 父级件传过来的相关信息 visible  title append fullscreen
    dialog: {
      type: Object,
      default: null
    },
    // dialog默认宽度
    width: {
      type: String,
      default: '50%'
    },
    // dialog默认距离顶部距离
    top: {
      type: String,
      default: '10vh'
    },
    // 是否隐藏底部
    showFooter: {
      type: Boolean,
      default: true
    },
    // dialog取消按钮
    btnCancle: {
      type: String,
      default: '取消'
    },
    // dialog确认按钮
    btnSure: {
      type: String,
      default: '确认'
    }
  },
  computed: {
    isShow: {
      get() {
        return this.dialog.visible
      },
      set(val) {
        const dialog = this.dialog
        dialog.visible = val
        this.$emit('update: dialog', dialog)
      }
    }
  },
  methods: {
    // 右上角关闭
    handleClose() {
      // this.$confirm('确认离开当前窗口？').then(_ => {
      this.isShow = false
      this.$emit('handleBtnClose')
      // }).catch(_ => { })
    },
    // 确定按钮关闭
    handleBtnSure() {
      // ...
      this.$emit('handleBtnSure')
    }
  }
}
</script>

<style scoped>
.dialog {
  overflow: hidden;
}
</style>
